<template>
  <div class="cart-view">
    <!-- 购物车页面 -->
    <div v-if="!showPayment" class="cart-container">
      <div class="cart-header">
        <h1>🛒 我的购物车</h1>
        <span class="cart-count">共 {{ cartProducts?.length }} 件商品</span>
      </div>

      <div class="cart-content">
        <div class="cart-items">
          <div v-for="item in cartProducts" :key="item.id" class="cart-item">
            <div class="item-image">
              <img :src="item.coverImg" :alt="item.title" />
            </div>
            <div class="item-info">
              <h3 class="item-title">{{ item.title }}</h3>
              <p class="item-desc">{{ item.description }}</p>
              <div class="item-meta">
                <span class="item-shop">{{ item.storeName }}</span>
                <span class="item-spec">{{ item.specify }}</span>
              </div>
            </div>
            <div class="item-price">
              <span class="current-price">¥{{ item.discountedPrice}}</span>
              <span class="original-price">¥{{ item.price }}</span>
            </div>
            <div class="item-quantity">
              <a-input-number
                v-model:value="item.quantity"
                :min="1"
                :max="99"
                size="small"
                @change="updateQuantity(item)"
              />
            </div>
            <div class="item-total">
              ¥{{ (item.discountedPrice * item.quantity).toFixed(2) }}
            </div>
            <div class="item-actions">
              <a-button type="link" size="small" @click="removeItem(item.id)">
                <DeleteOutlined />
                删除
              </a-button>
            </div>
          </div>
        </div>

        <div  class="cart-summary">
          <div class="summary-header">
            <h3>订单摘要</h3>
          </div>
          <div class="summary-content">
            <div class="summary-item">
              <span>商品总价：</span>
              <span>¥{{ totalPrice.toFixed(2) }}</span>
            </div>
            <div class="summary-item">
              <span>运费：</span>
              <span>¥{{ shipping.toFixed(2) }}</span>
            </div>
            <div class="summary-item discount">
              <span>优惠：</span>
              <span>-¥{{ discount.toFixed(2) }}</span>
            </div>
            <div class="summary-total">
              <span>实付金额：</span>
              <span class="total-amount">¥{{ finalPrice.toFixed(2) }}</span>
            </div>
          </div>
          <div class="summary-actions">
            <a-button type="primary" size="large" class="checkout-btn" @click="goToPayment">
              <ShoppingCartOutlined />
              立即结算
            </a-button>
            <a-button size="large" class="continue-btn" @click="router.push('/')">
              <ArrowLeftOutlined />
              继续购物
            </a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付页面 -->
    <div v-else class="payment-container" style="margin-top: 350px">
      <div class="payment-header">
        <a-button type="link" @click="backToCart" class="back-btn">
          <ArrowLeftOutlined />
          返回购物车
        </a-button>
        <h1>💳 订单支付</h1>
      </div>

      <div class="payment-content">
        <!-- 订单信息 -->
        <div class="order-info">
          <div class="order-header">
            <h3>📋 订单信息</h3>
          </div>
          <div class="order-details">
            <div class="order-item">
              <span>订单号：</span>
              <span class="order-number">{{ orderNumber }}</span>
            </div>
            <div class="order-item">
              <span>下单时间：</span>
              <span>{{ orderTime }}</span>
            </div>
            <div class="order-item">
              <span>支付金额：</span>
              <span class="payment-amount">¥{{ finalPrice.toFixed(2) }}</span>
            </div>
          </div>
        </div>

        <!-- 商品清单 -->
        <div class="order-items">
          <div class="order-header">
            <h3>🛍️ 商品清单</h3>
          </div>
          <div class="items-list">
            <div v-for="item in cartProducts" :key="item.id" class="order-item-card">
              <img :src="item.coverImg" :alt="item.title" class="item-img" />
              <div class="item-details">
                <h4>{{ item.title }}</h4>
                <p>{{ item.description }}</p>
                <div class="item-specs">
                  <span class="spec">{{ item.specify}}</span>
                  <span class="quantity">x{{ item.quantity }}</span>
                </div>
              </div>
              <div class="item-price-info">
                <span class="price">¥{{ item.discountedPrice }}</span>
                <span class="total">¥{{ (item?.discountedPrice * item?.quantity).toFixed(2) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 支付方式 -->
        <div class="payment-methods">
          <div class="order-header">
            <h3>💳 选择支付方式</h3>
          </div>
          <div class="methods-list">
            <div
              v-for="method in paymentMethods"
              :key="method.id"
              class="payment-method"
              :class="{ active: selectedPaymentMethod === method.id }"
              @click="selectPaymentMethod(method.id)"
            >
              <div class="method-icon">
                <component :is="method.icon" />
              </div>
              <div class="method-info">
                <h4>{{ method.name }}</h4>
                <p>{{ method.description }}</p>
              </div>
              <div class="method-radio">
                <a-radio :checked="selectedPaymentMethod === method.id" />
              </div>
            </div>
          </div>
        </div>

        <!-- 支付按钮 -->
        <div class="payment-actions">
          <div class="payment-summary">
            <div class="summary-row">
              <span>商品总价：</span>
              <span>¥{{ totalPrice.toFixed(2) }}</span>
            </div>
            <div class="summary-row">
              <span>运费：</span>
              <span>¥{{ shipping.toFixed(2) }}</span>
            </div>
            <div class="summary-row discount">
              <span>优惠：</span>
              <span>-¥{{ discount.toFixed(2) }}</span>
            </div>
            <div class="summary-row total">
              <span>实付金额：</span>
              <span class="final-amount">¥{{ finalPrice.toFixed(2) }}</span>
            </div>
          </div>
          <a-button
            type="primary"
            size="large"
            class="pay-btn"
            :loading="paying"
            @click="handlePayment"
          >
            <CreditCardOutlined />
            {{ paying ? '支付中...' : '立即支付' }}
          </a-button>
        </div>
      </div>
    </div>

    <!-- 支付成功弹窗 -->
    <a-modal
      v-model:open="showPaymentSuccess"
      title="🎉 支付成功"
      :footer="null"
      :closable="false"
      :mask-closable="false"
      width="400px"
      class="payment-success-modal"
    >
      <div class="success-content">
        <div class="success-icon">
          <CheckCircleOutlined />
        </div>
        <h3>支付成功！</h3>
        <p>您的订单已支付成功，我们会尽快为您发货</p>
        <div class="success-actions">
          <a-button type="primary" @click="goToOrders">查看订单</a-button>
          <a-button @click="goToHome">继续购物</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import {
  DeleteOutlined,
  ShoppingCartOutlined,
  ArrowLeftOutlined,
  CreditCardOutlined,
  CheckCircleOutlined,
  WechatOutlined,
  AlipayCircleOutlined,
  BankOutlined
} from '@ant-design/icons-vue'
import {deleteCartProducts, listCartVoByPage, payTheCart} from "@/api/cartController.ts";
import {message} from "ant-design-vue";

const router = useRouter()
const showPayment = ref(false)
const paying = ref(false)
const showPaymentSuccess = ref(false)
const selectedPaymentMethod = ref('alipay')
const cartProducts = ref<API.ProductsVO[] |[]>([])



//获取数据
const fetchData = async () => {
  const res = await listCartVoByPage();
  if (res.data.code === 0 && res.data.data) {
    cartProducts.value = res.data.data ?? [];
  } else {
    message.error('获取数据失败: ' + res.data.msg);
  }
};
onMounted(()=>{
  fetchData()
})
// 模拟购物车数据
const cartItems = ref([
  {
    id: 1,
    name: '兰蔻小黑瓶精华液',
    description: '修护精华，改善肤质',
    price: 899,
    originalPrice: 1299,
    quantity: 1,
    shop: '兰蔻官方旗舰店',
    spec: '30ml',
    image: 'https://via.placeholder.com/120x120/ff7675/ffffff?text=兰蔻'
  },
  {
    id: 2,
    name: '雅诗兰黛小棕瓶',
    description: '特润修护精华露',
    price: 699,
    originalPrice: 999,
    quantity: 2,
    shop: '雅诗兰黛官方店',
    spec: '50ml',
    image: 'https://via.placeholder.com/120x120/74b9ff/ffffff?text=雅诗兰黛'
  },
  {
    id: 3,
    name: 'SK-II神仙水',
    description: '护肤精华露',
    price: 1299,
    originalPrice: 1599,
    quantity: 1,
    shop: 'SK-II官方旗舰店',
    spec: '230ml',
    image: 'https://via.placeholder.com/120x120/55a3ff/ffffff?text=SK-II'
  }
])

// 支付方式
const paymentMethods = [
  {
    id: 'alipay',
    name: '支付宝',
    description: '推荐使用支付宝支付',
    icon: AlipayCircleOutlined
  },
  {
    id: 'wechat',
    name: '微信支付',
    description: '使用微信扫码支付',
    icon: WechatOutlined
  },
  {
    id: 'bank',
    name: '银行卡',
    description: '支持各大银行储蓄卡、信用卡',
    icon: BankOutlined
  }
]

const shipping = ref(0)
const discount = ref(100)

// 订单信息
const orderNumber = ref('ORD' + Date.now())
const orderTime = ref(new Date().toLocaleString())

const totalPrice = computed(() => {
  return cartProducts.value.reduce((sum, item) => sum + item.discountedPrice * item.quantity, 0)
})

const finalPrice = computed(() => {
  if(totalPrice.value + shipping.value===0){
    discount.value = 0
    return 0;
  }
  return totalPrice.value + shipping.value - discount.value
})

const updateQuantity = (item: any) => {
  console.log('更新数量:', item)
}

const removeItem  = async (id: number) => {
  try{
    const  params = {
      productId:id
    }
    const res = await  deleteCartProducts(params)
    if (res.data.code === 0 && res.data.data) {
      await fetchData()
      message.success("删除购物车商品成功!")
    } else {
      message.error('删除购物车商品失败: ' + res.data.msg);
    }
  }catch (error){
    message.error('删除购物车商品失败: ', error.message);
  }
}

const goToPayment = () => {
  if (cartItems.value.length === 0) {
    alert('购物车为空，请先添加商品')
    return
  }
  showPayment.value = true
}

const backToCart = () => {
  showPayment.value = false
}

const selectPaymentMethod = (methodId: string) => {
  selectedPaymentMethod.value = methodId
}

const handlePayment = async () => {
  paying.value = true

  // 模拟支付过程
  setTimeout(() => {
    paying.value = false
    showPaymentSuccess.value = true
  }, 2000)

  try {
    const res = payTheCart()
    if (res.data.data && res.data.code === 0) {
      message.success("支付成功")
    } else {
      message.error("支付失败")
    }
  } catch (e) {
    message.success("支付成功")
  }


}

const goToOrders = () => {
  showPaymentSuccess.value = false
  showPayment.value = false
  router.push('/orders')
}

const goToHome = () => {
  showPaymentSuccess.value = false
  showPayment.value = false
  router.push('/')
}
</script>

<style scoped>
.cart-view {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
/*  min-height: calc(100vh - 64px);*/
  min-height: 100vh ;
  width: 100%;
  padding: 24px 0;
}

.cart-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 24px;
}

.cart-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-header h1 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.cart-count {
  color: #666;
  font-size: 14px;
}

.cart-content {
  display: flex;
  gap: 24px;
}

.cart-items {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image {
  flex-shrink: 0;
}

.item-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.item-desc {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #999;
}

.item-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
}

.item-shop {
  color: #667eea;
  font-weight: 500;
}

.item-spec {
  color: #666;
}

.item-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.current-price {
  font-size: 18px;
  font-weight: 600;
  color: #ff4757;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.item-quantity {
  min-width: 80px;
}

.item-total {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  min-width: 100px;
  text-align: center;
}

.item-actions {
  min-width: 60px;
}

.cart-summary {
  width: 320px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  height: fit-content;
  position: sticky;
  top: 100px;
}

.summary-header h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.summary-content {
  margin-bottom: 24px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.summary-item.discount {
  color: #ff4757;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.total-amount {
  font-size: 20px;
  font-weight: 700;
  color: #ff4757;
}

.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkout-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.continue-btn {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .cart-container {
    padding: 0 20px;
  }

  .cart-content {
    gap: 20px;
  }

  .cart-summary {
    width: 280px;
  }
}

@media (max-width: 992px) {
  .cart-content {
    flex-direction: column;
  }

  .cart-summary {
    width: 100%;
    position: static;
  }

  .cart-item {
    flex-wrap: wrap;
    gap: 12px;
  }

  .item-info {
    flex: 1;
    min-width: 200px;
  }

  .item-price,
  .item-quantity,
  .item-total,
  .item-actions {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .cart-view {
    padding: 16px 0;
  }

  .cart-container {
    padding: 0 16px;
  }

  .cart-header {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cart-header h1 {
    font-size: 20px;
  }

  .cart-items,
  .cart-summary {
    padding: 16px;
  }

  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
  }

  .item-image img {
    width: 60px;
    height: 60px;
  }

  .item-price,
  .item-quantity,
  .item-total,
  .item-actions {
    align-self: flex-end;
  }

  .item-meta {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .cart-view {
    padding: 12px 0;
  }

  .cart-container {
    padding: 0 12px;
  }

  .cart-header {
    padding: 16px;
  }

  .cart-header h1 {
    font-size: 18px;
  }

  .cart-items,
  .cart-summary {
    padding: 12px;
  }

  .item-title {
    font-size: 14px;
  }

  .current-price {
    font-size: 16px;
  }

  .item-total {
    font-size: 16px;
  }

  .checkout-btn,
  .continue-btn {
    height: 44px;
    font-size: 14px;
  }
}

/* 支付页面样式 */
.payment-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
/*  min-height: calc(100vh - 64px);*/
  min-height: 100vh;
  width: 100%;
/*  padding: 24px 0;*/
}

.payment-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
/*  margin-bottom: 24px;*/
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 24px 24px 24px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.payment-header h1 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.payment-content {
  max-width: 800px;
  margin: 0 auto;
/*  padding: 0 24px;*/
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-info,
.order-items,
.payment-methods {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.order-header {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.order-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.order-number {
  color: #667eea;
  font-weight: 600;
  font-family: monospace;
}

.payment-amount {
  color: #ff4757;
  font-size: 18px;
  font-weight: 700;
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-item-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fafafa;
}

.item-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.item-details {
  flex: 1;
  min-width: 0;
}

.item-details h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.item-details p {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #999;
}

.item-specs {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.spec {
  color: #666;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
}

.quantity {
  color: #ff4757;
  font-weight: 500;
}

.item-price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 80px;
}

.price {
  font-size: 14px;
  color: #666;
}

.total {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.methods-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.payment-method.active {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.method-icon {
  font-size: 24px;
  color: #667eea;
  width: 40px;
  text-align: center;
}

.method-info {
  flex: 1;
}

.method-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.method-info p {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.method-radio {
  width: 20px;
}

.payment-actions {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.payment-summary {
  flex: 1;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.summary-row.discount {
  color: #ff4757;
}

.summary-row.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.final-amount {
  font-size: 20px;
  font-weight: 700;
  color: #ff4757;
}

.pay-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
}

/* 支付成功弹窗样式 */
.payment-success-modal :deep(.ant-modal-content) {
  border-radius: 12px;
  overflow: hidden;
}

.success-content {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  font-size: 64px;
  color: #52c41a;
  margin-bottom: 16px;
}

.success-content h3 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.success-content p {
  margin: 0 0 24px 0;
  color: #666;
  font-size: 14px;
}

.success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* 支付页面响应式设计 */
@media (max-width: 768px) {
  .payment-container {
    padding: 16px 0;
  }

  .payment-header {
    margin: 0 16px 16px 16px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .payment-header h1 {
    font-size: 20px;
  }

  .payment-content {
    padding: 0 16px;
    gap: 16px;
  }

  .order-info,
  .order-items,
  .payment-methods,
  .payment-actions {
    padding: 16px;
  }

  .payment-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .pay-btn {
    width: 100%;
  }

  .order-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .item-price-info {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .payment-container {
    padding: 12px 0;
  }

  .payment-header {
    margin: 0 12px 12px 12px;
    padding: 16px;
  }

  .payment-header h1 {
    font-size: 18px;
  }

  .payment-content {
    padding: 0 12px;
    gap: 12px;
  }

  .order-info,
  .order-items,
  .payment-methods,
  .payment-actions {
    padding: 12px;
  }

  .order-header h3 {
    font-size: 16px;
  }

  .payment-method {
    padding: 12px;
    gap: 12px;
  }

  .method-icon {
    font-size: 20px;
    width: 32px;
  }

  .method-info h4 {
    font-size: 14px;
  }

  .pay-btn {
    height: 44px;
    font-size: 14px;
  }
}
</style>
